<template>
	<view class="wrap app_wrap-gHeaderT20">
		<view class="t-header app_gHeaderFixed">
			<!-- <g-header title="销售流水明细" rtype="share"></g-header> -->
			<g-header title="销售流水明细" hideRight></g-header>
		</view>
		<view>
			<view class="item app_flex-aicjcsb">
				<view class="item-L app_flex-aic">
					<image src="../../static/images/icon-saleWaterD-1.png"></image>
					<text>关联销售单</text>
				</view>
				<view class="item-R app_arrow">{{salesWaterInfo.code}}</view>
			</view>
			<view class="item app_flex-aicjcsb">
				<view class="item-L app_flex-aic">
					<image style="width: 28rpx;height: 29rpx;" src="../../static/images/icon-saleWaterD-2.png"></image>
					<text>客户名称</text>
				</view>
				<view class="item-R">{{salesWaterInfo.customer}} {{salesWaterInfo.tel}}</view>
			</view>
			<view class="item app_flex-aicjcsb">
				<view class="item-L app_flex-aic">
					<image src="../../static/images/icon-saleWaterD-3.png"></image>
					<text>销售日期</text>
				</view>
				<view class="item-R">{{salesWaterInfo.saleslipDate}}</view>
			</view>
		</view>
		<view class="goodsList">
			<view class="goodsList-header">商品列表</view>
			<view class="goodsList-main">
				<block v-if="salesWaterInfo&&salesWaterInfo.productList">
					<view class="goodsItemWrap" v-for="(item, index) in salesWaterInfo.productList" :key="index">
						<view class="goodsItem">
							<view class="goodsItem-img">
								<image :src="item.cover" mode=""></image>
							</view>
							<view class="goodsItem-main">
								<view class="goodsItem-title">{{item.productName}}</view>
								<view class="goodsItem-mainB">
									<view class="goodsItem-mainB_L">
										<text>￥{{item.unitPrice}}/米</text>
										<text>（{{item.horse}}）</text>
									</view>
									<view class="goodsItem-mainB_R">货号：</view>
								</view>
							</view>
						</view>
						<view class="goodsDetail">
							<view class="goodsDetail-header">{{item.skuName}}</view>
							<view class="goodsDetail-main">
								<view class="goodsDetail-item">
									<view class="goodsDetail-item_L">
										<view class="goodsDetail-item_img">
											<image :src="item.colorUrl" mode=""></image>
										</view>
										<view class="goodsDetail-item_title">
											<text>色号：</text>
											<text>{{item.color}}</text>
										</view>
									</view>
									<view class="goodsDetail-item_R">
										<text>￥{{item.unitPrice}}</text>
										<text>x{{item.totalCount}}/米</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<view class="totalBar app_flex-aicjcsb">
			<view class="totalBar-L">总数量：{{salesWaterInfo.totalQuantity}}</view>
			<view class="totalBar-R">总额：￥{{salesWaterInfo.contractPrices}}</view>
		</view>

		<u-popup v-model="showShare" border-radius="16" mode="bottom" safe-area-inset-bottom>
			<view class="share">
				<view class="share-header">分享至</view>
				<view class="share-main u-flex">
					<view class="share-item u-flex-1 app_flex-aic">
						<image src="../../static/images/icon-wx.png"></image>
						<view>微信好友</view>
					</view>
					<view class="share-item u-flex-1 app_flex-aic">
						<image src="../../static/images/icon-pyq.png"></image>
						<view>朋友圈</view>
					</view>
					<view class="share-item u-flex-1 app_flex-aic">
						<image src="../../static/images/icon-qq.png"></image>
						<view>QQ好友</view>
					</view>
					<view class="share-item u-flex-1 app_flex-aic">
						<image src="../../static/images/icon-imgZw.png"></image>
						<view>保存图片</view>
					</view>
				</view>
				<view class="share-cancel">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showShare: false,
				saleslipId: '',
				salesWaterInfo: {}
			}
		},
		onLoad(options) {
			this.saleslipId = options.saleslipId
			this.getWaterDetail()
		},
		methods: {
			getWaterDetail() {
				this.$g_api.salesDataSaleroomDetail({
					saleslipId: this.saleslipId,
					// shopId: 58,
				}).then(({
					data
				}) => {
					if (data.productList.length > 0) {
						data.productList.forEach(item => {
							if (item.cover.indexOf('https://') == -1 && item.cover.indexOf('http://') == -
								1) {
								item.cover = this.$g_config.requestUrl + item.cover
							}
							if (item.colorUrl.indexOf('https://') == -1 && item.colorUrl.indexOf('http://') == -
								1) {
								item.colorUrl = this.$g_config.requestUrl + item.colorUrl
							}
						})
					}
					this.salesWaterInfo = data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-bottom: calc(130rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
	}

	.item {
		height: 100rpx;
		padding: 0 30rpx;
		border-bottom: 1px solid $g-border-color;
		background-color: #fff;
	}

	.item-L {
		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
		}

		text {
			font-size: 28rpx;
			color: #888;
		}
	}

	.item-R {
		font-size: 28rpx;
	}

	.totalBar {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 690rpx;
		height: 100rpx;
		padding: 0 30rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		font-size: 32rpx;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
		background-color: #fff;
	}

	.totalBar-L {}

	.totalBar-R {}

	.goodsList {}

	.goodsList-header {
		line-height: 90rpx;
		padding-left: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.goodsItemWrap {
		padding-bottom: 30rpx;
		border-bottom: 1px solid $g-border-color;
		background-color: #fff;
	}

	.goodsItem {
		display: flex;
		padding: 30rpx 20rpx 0;
	}

	.goodsItem-img {
		width: 140rpx;
		font-size: 0;

		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
			background-color: $g-main-bg;
		}
	}

	.goodsItem-main {
		flex: 1;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goodsItem-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.goodsItem-mainB {
		display: flex;
		justify-content: space-between;
	}

	.goodsItem-mainB_L {
		text {
			&:first-child {
				color: #FF4C4C;
				font-size: 26rpx;
			}

			&:last-child {
				color: #999999;
				font-size: 20rpx;
			}
		}
	}

	.goodsItem-mainB_R {
		font-size: 24rpx;
		color: #999;
	}

	.goodsDetail {
		padding: 0 20rpx;
		background-color: #fff;
	}

	.goodsDetail-header {
		line-height: 70rpx;
	}

	.goodsDetail-main {
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #F7F7F7;
	}

	.goodsDetail-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.goodsDetail-item_L {
		display: flex;
		align-items: center;
	}

	.goodsDetail-item_img {
		width: 50rpx;
		margin-right: 20rpx;
		font-size: 0;

		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 4rpx;
			background-color: skyblue;
		}
	}

	.goodsDetail-item_title {
		font-size: 24rpx;
		color: #333;
	}

	.goodsDetail-item_R {
		text {
			font-size: 24rpx;

			&:nth-child(1) {
				color: #FF4C4C;
			}

			&:nth-child(2) {
				color: #333;
			}
		}
	}

	.share {}

	.share-header {
		line-height: 90rpx;
		text-align: center;
		border-bottom: 1px solid $g-border-color;
	}

	.share-main {
		padding: 50rpx 0 40rpx;
	}

	.share-item {
		flex-direction: column;
		font-size: 0;

		image {
			width: 100rpx;
			height: 100rpx;
			margin-bottom: 20rpx;
		}

		view {
			font-size: 24rpx;
		}
	}

	.share-cancel {
		border-top: 20rpx solid #e6e6e6;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid $g-border-color;
	}
</style>
